<template lang="html">
  <div id="">
    <!-- <span class="shadow"></span> -->
    <div class="mintPicker">
      <div class="pickerTop">
        <span class="cancel" @click="cancel">取消</span>
        约看时间
        <span class="sure" @click="sure">确定</span>
      </div>
      <mt-picker
        :slots="slots"
        :valueKey="'value'"
        @change="onValuesChange">
      </mt-picker>
    </div>
  </div>
</template>

<script>
export default {
  name:'mintPicker',
  data:() => ({
    mintChooseValue:'',       //picker选择的值
    weekday:['周日','周一','周二','周三','周四','周五','周六'],
    slots: [
      {
        flex: 1,
        values: [],
        className: 'slot1',
        textAlign: 'center'
      },{
        flex: 1,
        values: ['24时','23时','22时','21时','20时','19时','18时','17时','16时','15时','14时','13时','12时','11时','10时','9时','8时','7时','6时','5时','4时','3时','2时','1时'],
        className: 'slot2',
        textAlign: 'center'
      }
    ],
    reserveTime:'',
    year:'',
    month:'',
  }),
  mounted() {
    //do something after mounting vue instance
    let that = this;
    this.mintChooseValue = this.slots[0];
    let date = new Date();
    let year = date.getFullYear();    //年
    let month = date.getMonth()+1;    //月份
    let day = date.getDate();    //日
    let thMonthdays = new Date(2018,month,0).getDate();   //本月的天数
    let weekday = date.getDay();      //当天的星期
    console.log(month);
    let dateSlot = [];
    let dateMonth = [];
    let deadline = 0;
    let daymonth=0;
    for (var i = 1; i < 10; i++) {
      if( (day+i) > thMonthdays ){  //7天限制超过本月
        deadline = day+i - thMonthdays;
        month =date.getMonth()+1+ 1;
        if(month>12){
          month -= 12;
          year = date.getFullYear() + 1;
        }
      }else{
        deadline = day+i;
      }
      let week = weekday+i;
      if( week > 7){
        week = week-7;
      }
      if(week == 7){
        week = 0;
      }
      daymonth = month < 10 ? '0'+month : month;
      let dayline = deadline<10?'0'+deadline:deadline;
      dateSlot.push({
        value:daymonth+'月'+dayline+'日 '+that.weekday[week],
        month:daymonth,
        year:year,
        day:dayline
      });
    }
    console.log(dateSlot);
    that.slots[0].values = dateSlot;
  },
  updated() {
    //do something after updating vue instance
    this.$nextTick( () => {
      this.mintChooseValue = [
        this.slots[0].values[0],
        this.slots[1].values[0]
      ];
    })
  },
  methods:{
    onValuesChange(picker, values) {
      // console.log(values);
      this.mintChooseValue = values;
    },
    cancel(){
      this.$emit('mintPickerBtn',{
        mintChooseValue:this.mintChooseValue,
        year:this.year,
        month:this.month,
        chooseBtn:false,
      });
    },
    sure(){
      console.log(this.mintChooseValue);
      this.$emit('mintPickerBtn',{
        mintChooseValue:this.mintChooseValue,
        chooseBtn:true,
      });
    }
  },
  created(){
    console.log(this.slots);
  }
}
</script>

<style lang="scss" scoped>
@import "@/main.scss";
.shadow{
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
.mintPicker{
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 3;
  background: white;
  border-top: 1px solid $borderColor;
  // padding-top: 10px;
}
.pickerTop{
  @include flex;
  justify-content: space-around;
  border-bottom: 1px solid $borderColor;
  line-height: 2rem;
  padding: 10px 0;
  .cancel{
    color: $lightColor;
  }
  .sure{
    color: $greenColor;
  }
}
</style>
